<template>
	<view class="d-inline-block position-relative">
		<button size="mini" class="mx-1 my-1" :style="getStyle" :class="bool?'main-bg-color':''">
			{{item.name}}
		</button>
		<slot></slot>
	</view>
</template>

<script>
	export default {
		name: "color-tag",
		data() {
			return {

			};
		},
		props: {
			item: {
				type: Object
			},
			color: {
				type: Boolean
			},
			bool: {
				type: Boolean
			},
		},
		computed: {
			getStyle() {
				if(this.color){
					let borderColor = ['#EEA6AA', '#DD6A4B', '#98D5D8', '#9DBE93', '#BCCD99'];
					let backGround = ['#F8EAE9', '#FFBEC6', '#E8F6F6', '#E4F5E2', '#F2F6E8'];
					let index = Math.floor(Math.random() * backGround.length)
					return `border:1px solid ${borderColor[index]};background-color:${backGround[index]}`
				}else{
					return `background-color:#f8f8f8`
				}
				
			}
		}
	}
</script>

<style>

</style>